JavaScript & CSS

Include JavaScript and CSS files in HEAD tag.
jQuery UI is only required when multiple backgrounds are enabled in IE7,8,9.

                
                    <link rel="stylesheet" type="text/css" href="royal_preloader.css" />
                    <script type="text/javascript" src="jquery.js"></script>
                    <script type="text/javascript" src="royal_preloader.min.js"></script>
                    <script type="text/javascript">
                        var images = {
                            'wallpaper1':     'http://www.melonhtml5.com/images/wallpaper/1.jpg',
                            'wallpaper2':     'http://www.melonhtml5.com/images/wallpaper/2.jpg',
                            'wallpaper3':     'http://www.melonhtml5.com/images/wallpaper/3.jpg',
                            'Metro Gallery':  'http://www.melonhtml5.com/images/metro_gallery.png',
                            'Emu Slider':     'http://www.melonhtml5.com/images/emu_slider.png',
                            'Cut the Rope':   'http://www.melonhtml5.com/images/cut_the_rope.png',
                            'All in One Tab': 'http://www.melonhtml5.com/images/tab.png'
                        };

                        // config
                        Royal_Preloader.config({
                            mode:       'number',
                            images:     images,
                            timeout:    10,
                            showInfo:   true,
                            background: ['#000000', '#FF0000', '#0097AA', '#F29500', '#C23916', '#94C849', '#6FA014', '#91009B']
                        });
                    </script>

HTML Code

Add a class name "royal_loader" to the BODY tag

                <body class="royal_loader">

Configurations

modestring

Default value: number
Possible values: text, number, logo.
number: a loader image is shown, the loading progress is displayed in percentage values and loading details are also displayed on each image load.
text: a pre-defined text will be displayed in the center of the screen, and fades out from left ro right.
logo: displaying a logo in the screen center, and fades out from bottom to top.
```
                        Royal_Preloader.config({
                            mode: "text"
                        });
                    
```

imagesJSON

Default value: empty.
Define images to be preloaded. Format: {name: image_url}. "name" is displayed when showInfo is turned on.

                        var images = {
                            'wallpaper1':     'http://www.melonhtml5.com/images/wallpaper/1.jpg',
                            'wallpaper2':     'http://www.melonhtml5.com/images/wallpaper/2.jpg',
                            'wallpaper3':     'http://www.melonhtml5.com/images/wallpaper/3.jpg',
                            'Metro Gallery':  'http://www.melonhtml5.com/images/metro_gallery.png',
                            'Emu Slider':     'http://www.melonhtml5.com/images/emu_slider.png',
                            'Cut the Rope':   'http://www.melonhtml5.com/images/cut_the_rope.png',
                            'All in One Tab': 'http://www.melonhtml5.com/images/tab.png'
                        };

                        Royal_Preloader.config({
                            images: images
                        });

timeoutInt

Default value: 10 (seconds).
When timeout is exceeded, no matter images have been all downloaded or not, the loading screen will finish and your website will be shown.

                        Royal_Preloader.config({
                            timeout: 10
                        });

opacityInt

Default value: 1.
Possible values: 0 ~ 1. When opacity is set to be less than 1, the loading overlay will have a transparent backgorund and you will be able to see through the website.
```
                        Royal_Preloader.config({
                            opacity: 0.5
                        });
                    
```

backgroundarray

Default value: ["#000000"].
An array containing the colors for the background. Colours transit from one to another during loading.

                        Royal_Preloader.config({
                            backgorund: ['#000000', '#FF0000', '#0097AA', '#F29500', '#C23916', '#94C849', '#6FA014', '#91009B']
                        });

textString

Default value: loading...
Set the loading text. (this only works when mode is set to "text")

                        Royal_Preloader.config({
                            text: "MelonHTML5 - Royal Preloader..."
                        });

logostring

Default value: empty string.
The URL of the logo image. (this only works when mode is set to "logo")

                        Royal_Preloader.config({
                            logo: 'http://www.example.com/logo.jpg'
                        });

showPercentageBoolean

Default value: true.
Show the loading progress in percentage values. (this only works when mode is set to "number")

                        Royal_Preloader.config({
                            showPercentage: true
                        });

showInfoBoolean

Default value: true.
When showInfo is set to true, image names are displayed in the loading screen. (this only works when mode is set to "number")

                        Royal_Preloader.config({
                            showInfo: true
                        });

onCompleteFunction

Default value: null.
Callback function to be executed after loading is completed.

                        Royal_Preloader.config({
                            onComplete: function() {
                                alert('Woo hoo, loading images are complete');
                            }
                        });

Loader Image

To change the loader image, simply create a loader.gif in images folder.